<template>
  <div>
    <basic-table
      :border="false"
      :columns="columns"
      :tableEvents="tableEvents"
      :data="tableData"
      :pagination="pagination"
    >
      <template #projectCode="scope">
        <div class="project-code">
          <div class="code-icon">
            <iconify-icon
              icon="material-symbols:arrow-circle-up"
              :width="18"
              :height="18"
              color="#2e72ef"
              v-if="scope.row.iconFlag"
            ></iconify-icon>
            <iconify-icon
              icon="material-symbols:arrow-circle-up-outline"
              :width="16"
              :height="16"
              v-else
            ></iconify-icon>
          </div>
          <div>{{ scope.row.projectCode }}</div>
        </div>
      </template>
      <template #projectName="scope">
        <div class="project-name">{{ scope.row.projectName }}</div>
      </template>
      <template #projectState="scope">
        <el-tag class="ml-2" type="success">{{ scope.row.projectState }}</el-tag>
      </template>
    </basic-table>
  </div>
</template>

<script setup>
const pagination = ref({
  pageSizes: [10, 20, 30, 50, 100],
  layout: 'total, sizes, prev, pager, next',
  total: 11,
});
const columns = ref([
  {
    label: '项目编号',
    prop: 'projectCode',
    slot: 'projectCode',
  },
  {
    label: '项目名称',
    prop: 'projectName',
    slot: 'projectName',
  },
  {
    label: '项目状态',
    prop: 'projectState',
    slot: 'projectState',
  },
  {
    label: '被审计单位',
    prop: 'company',
  },
  {
    label: '审计时间',
    prop: 'time',
  },
  {
    label: '待完成实现',
    prop: 'success',
  },
]);
const tableData = ref([
  {
    projectCode: '111',
    company: '集团总部，北京子公司',
    time: '2023/01/01-2023/12/31',
    success: '审前实施方案',
    projectName: '西部项目原党委书记、执行董事张三经济责任审计',
    projectState: '项目准备',
    iconFlag: true,
  },
]);
</script>

<style lang="scss" scoped>
.project-code {
  display: flex;
  align-items: center;
  .code-icon {
    margin-right: 10px;
  }
}
.project-name {
  color: #2e72ef;
}
</style>
